<template>
  <div class="statistics">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>最近30天统计</h3>
        </div>
      </template>
      <div>
        <v-chart class="chart" :autoresize="true" :option="option" />
      </div>
    </el-card>
  </div>
</template>

<style lang="less">
.statistics {
  .chart {
    height: 400px;
  }
}
</style>

<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  TooltipComponent,
  ToolboxComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide, onBeforeMount } from 'vue'
import { getLastDays } from '@/service/DateService'
import { backendService, ResponseCode } from '@/service/BackendService'

use([
  TooltipComponent,
  ToolboxComponent,
  LegendComponent,
  GridComponent,
  BarChart,
  LineChart,
  CanvasRenderer
])

provide(THEME_KEY, 'dark')

const option = ref({})

onBeforeMount(() => {
  backendService
    .post('/api/statistics', {})
    .then((response) => {
      let data = response.data
      if (data.code === ResponseCode.OK) {
        let days = 30
        let last30dSyncStatistics = data.data.last30dSyncStatistics
        let last30Days = getLastDays(days)
        let last30dSyncTotalData = []
        let last30dSyncPendingData = []
        let last30dSyncSuccessData = []
        let last30dSyncFailedData = []
        for (let i = 0; i < days; i++) {
          let day = last30Days[i]
          last30dSyncTotalData.push(last30dSyncStatistics.last30dSyncTotalCount[day] || 0)
          last30dSyncPendingData.push(last30dSyncStatistics.last30dSyncPendingCount[day] || 0)
          last30dSyncSuccessData.push(last30dSyncStatistics.last30dSyncSuccessCount[day] || 0)
          last30dSyncFailedData.push(last30dSyncStatistics.last30dSyncFailedCount[day] || 0)
        }
        option.value = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {}
          },
          legend: {
            data: ['总数量', '待处理数量', '成功数量', '失败数量']
          },
          xAxis: [
            {
              type: 'category',
              data: last30Days,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '记录数量',
              min: 0
            }
          ],
          series: [
            {
              name: '总数量',
              type: 'line',
              data: last30dSyncTotalData,
              itemStyle: {
                color: '#5871c0'
              }
            },
            {
              name: '待处理数量',
              type: 'line',
              data: last30dSyncPendingData,
              itemStyle: {
                color: '#f3c86b'
              }
            },
            {
              name: '成功数量',
              type: 'bar',
              data: last30dSyncSuccessData,
              itemStyle: {
                color: '#9ec97e'
              }
            },
            {
              name: '失败数量',
              type: 'line',
              data: last30dSyncFailedData,
              itemStyle: {
                color: '#de6e6a'
              }
            }
          ]
        }
      }
    })
    .catch((error: any) => {
      ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
        dangerouslyUseHTMLString: true
      })
    })
    .finally(() => {})
})
</script>
